import {useState} from 'react'
import { Toast, NavBar } from 'react-vant';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import './App.css'
// import { useNavigate } from 'react-router-dom';
import { Search } from 'react-vant';

function App() {
  // const navigate = useNavigate()
  const [value, setValue] = useState('');

  const onChange = (key: string) => {
    console.log(key);
  };
  
  const handleToDetail = (item) =>{
    // navigate('/detail')
  }

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '注册用户',
      children: [
        <div onClick={()=>handleToDetail(item)}>
          <dl style={{ display: 'flex', alignItems: "center" }}>
            <dt>
              <img style={{ width: '40px', height: "40px", borderRadius: "50%", margin: "0 20px" }} src="" alt="" />
            </dt>
            <dd>
              <p style={{ display: 'flex', justifyContent: 'space-between', alignItems: "center" }}>
                <span>张三</span>
                <span>176****1304</span>
              </p>
              <p>注册时间:2020-05-17 12:00</p>
            </dd>
          </dl>
          <dl style={{ display: 'flex', alignItems: "center" }}>
            <dt>
              <img style={{ width: '40px', height: "40px", borderRadius: "50%", margin: "0 20px" }} src="" alt="" />
            </dt>
            <dd>
              <p style={{ display: 'flex', justifyContent: 'space-between', alignItems: "center" }}>
                <span>张三</span>
                <span>176****1304</span>
              </p>
              <p>注册时间:2020-05-17 12:00</p>
            </dd>
          </dl>
          <dl style={{ display: 'flex', alignItems: "center" }}>
            <dt>
              <img style={{ width: '40px', height: "40px", borderRadius: "50%", margin: "0 20px" }} src="" alt="" />
            </dt>
            <dd>
              <p style={{ display: 'flex', justifyContent: 'space-between', alignItems: "center" }}>
                <span>张三</span>
                <span>176****1304</span>
              </p>
              <p>注册时间:2020-05-17 12:00</p>
            </dd>
          </dl>
          <dl style={{ display: 'flex', alignItems: "center" }}>
            <dt>
              <img style={{ width: '40px', height: "40px", borderRadius: "50%", margin: "0 20px" }} src="" alt="" />
            </dt>
            <dd>
              <p style={{ display: 'flex', justifyContent: 'space-between', alignItems: "center" }}>
                <span>张三</span>
                <span>176****1304</span>
              </p>
              <p>注册时间:2020-05-17 12:00</p>
            </dd>
          </dl>
          <dl style={{ display: 'flex', alignItems: "center" }}>
            <dt>
              <img style={{ width: '40px', height: "40px", borderRadius: "50%", margin: "0 20px" }} src="" alt="" />
            </dt>
            <dd>
              <p style={{ display: 'flex', justifyContent: 'space-between', alignItems: "center" }}>
                <span>张三</span>
                <span>176****1304</span>
              </p>
              <p>注册时间:2020-05-17 12:00</p>
            </dd>
          </dl>
          <dl style={{ display: 'flex', alignItems: "center" }}>
            <dt>
              <img style={{ width: '40px', height: "40px", borderRadius: "50%", margin: "0 20px" }} src="" alt="" />
            </dt>
            <dd>
              <p style={{ display: 'flex', justifyContent: 'space-between', alignItems: "center" }}>
                <span>张三</span>
                <span>176****1304</span>
              </p>
              <p>注册时间:2020-05-17 12:00</p>
            </dd>
          </dl>
          <dl style={{ display: 'flex', alignItems: "center" }}>
            <dt>
              <img style={{ width: '40px', height: "40px", borderRadius: "50%", margin: "0 20px" }} src="" alt="" />
            </dt>
            <dd>
              <p style={{ display: 'flex', justifyContent: 'space-between', alignItems: "center" }}>
                <span>张三</span>
                <span>176****1304</span>
              </p>
              <p>注册时间:2020-05-17 12:00</p>
            </dd>
          </dl>
        </div>
      ]
    },
    {
      key: '2',
      label: '直系团长',
      children: '直系团长',
    }
  ];
  return (
    <div>
      <NavBar
        title="我的团队"
        leftText="返回"
        onClickLeft={() => Toast('返回')}
      />
       <Search value={value} onChange={setValue} clearable placeholder="请输入搜索关键词" />
      <div>
        <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
      </div>
    </div>
  )
}

export default App
